<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ include file="/page/public/public-taglibs.jsp"%>
<!DOCTYPE html>
<html lang="en">
<head>
<%@ include file="/page/public/public-css.jsp"%>
</head>
<body class="no-skin">
	<div class="main-container sub-page-content" id="main-container">
		<!-- /section:basics/sidebar -->
		<div class="main-content">
			<div class="main-content-inner">
				<div class="page-content">
					<div class="row">
						<!-- /.page-header -->
						<div class="col-xs-4 col-sm-4 widget-container-col">
							<div class="widget-box widget-color-green">
								<!-- #section:custom/widget-box.options -->
								<div class="widget-header">
									<h5 class="widget-title">
										<i class="ace-icon fa fa-sitemap bigger-130"></i>组织机构
									</h5>
									<div class="widget-toolbar no-border">
										<span style="padding-left: 20px;" data-rel="tooltip" data-placement="bottom" title="刷新"> <i
											class="ace-icon fa fa-refresh bigger-120 "></i>
										</span>
									</div>
								</div>

								<!-- /section:custom/widget-box.options -->
								<div class="widget-body"
									style="min-height: 450px; max-height: 500px; overflow-y: auto">
									<div class="widget-main">
										<div class="clearfix">
											<div class="row">
												<div class="col-xs-12">
													<!-- <ul id="treeview"></ul> -->
													<div id="treeview11" class=""></div>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
						<!-- /.span -->

						<!-- /.page-header -->
						<div class="col-xs-8 col-sm-8 widget-container-col"
							style="padding-left: 0px;">
							<div class="row">
								<div class="col-xs-12 col-sm-12">


									<div class="widget-box widget-color-green">
										<!-- #section:custom/widget-box.options -->
										<div class="widget-header">
											<h5 class="widget-title">
												<i class="ace-icon fa fa-info bigger-130"></i>机构信息
											</h5>
											<div class="widget-toolbar no-border"></div>
										</div>

										<!-- /section:custom/widget-box.options -->
										<div class="widget-body" style="min-height: 450px;">
											<div class="widget-main">
												<div class="clearfix">
													<div class="row">
														<div id="orgInfo" class="col-xs-12"
															style="padding-left: 10px; padding-right: 10px;"></div>
													</div>

													<!-- PAGE CONTENT BEGINS -->
													<div class="row">
														<div class="col-xs-12 table-scrollable"
															style="padding-left: 10px; padding-right: 10px;">
															<h5 class="widget-title blue smaller">
																<i class="ace-icon fa fa-rss orange"></i> 子机构列表
															</h5>
															<table id="simple-table"
																class="table table-striped table-bordered table-hover">
																<thead>
																	<tr>
																		<th>机构编码</th>
																		<th>机构名称</th>
																		<th>类型</th>
																		<th>显示顺序</th>
																		<th>是否可用</th>
																		<th>操作</th>
																	</tr>
																</thead>
																<tbody id="subOrgs">

																</tbody>
															</table>
														</div>
														<!-- /.span -->
													</div>
													<!-- /.row -->
												</div>
											</div>
										</div>
									</div>

								</div>
							</div>
						</div>

					</div>
					<!-- /.row -->
				</div>
			</div>
		</div>
	</div>

	<!-- JS模板 -->
	<script id="tmpl-orgInfo" type="text/x-jquery-tmpl">
	<h5 class="widget-title blue smaller">
			<i class="ace-icon fa fa-rss orange"></i> 当前选中机构信息
			
			
			<button class="btn btn-xs btn-yellow pull-right" style="margin-top:-5px;margin-left:10px">
				<i class="ace-icon fa fa-trash-o icon-on-left"></i>删除
			</button>
			<button class="btn btn-xs btn-yellow pull-right"  style="margin-top:-5px;margin-left:10px">
				<i class="ace-icon fa fa-edit icon-on-left"></i>修改
			</button>
			<button class="btn btn-xs btn-yellow pull-right" style="margin-top:-5px;margin-left:10px">
				<i class="ace-icon fa fa-plus icon-on-left"></i>新增子机构
			</button>
	</h5>
	<div class="profile-user-info profile-user-info-striped"
		style="width: 100%;">
		<div class="profile-info-row">
			<div class="profile-info-name">机构编码</div>

			<div class="profile-info-value">
				<span class="editable editable-click" id="username">{{= id}}</span>
			</div>

			<div class="profile-info-name">机构名称</div>

			<div class="profile-info-value">
				<i class="fa fa-map-marker light-orange bigger-110"></i>
				<span class="editable editable-click" id="country">{{= name}}</span>
			</div>
		</div>


		<div class="profile-info-row">
			<div class="profile-info-name">机构类型</div>

			<div class="profile-info-value">
				<span class="editable editable-click" id="age">
					{{if org_type == 1}}
						<i class="ace-icon fa fa-institution red2 bigger-110"></i>总公司
					{{else org_type == 2}}
						<i class="ace-icon fa fa-sitemap green bigger-110"></i>分公司
					{{else org_type == 3}}
						<i class="ace-icon fa fa-users blue bigger-110"></i>部门
					{{else org_type == 4}}
						<i class="ace-icon fa fa-user orange bigger-110"></i>小组
					{{else}}
						<i class="fa fa-map-marker light-orange bigger-110"></i>其他
					{{/if}}
			</div>

			<div class="profile-info-name">是否可用</div>

			<div class="profile-info-value">
					{{if available}}
						<span class="label label-sm label-success">可用</span>
					{{else}}
						<span class="label label-sm label-danger">不可用</span>
					{{/if}}
			</div>
		</div>

		<div class="profile-info-row">
			<div class="profile-info-name">创建人</div>

			<div class="profile-info-value">
				<span class="editable editable-click" id="age">{{= creator}}</span>
			</div>

			<div class="profile-info-name">创建时间</div>

			<div class="profile-info-value">
				<span class="editable editable-click" id="login">{{= createtime}}</span>
			</div>
		</div>
		<div class="profile-info-row">
			<div class="profile-info-name">机构从属</div>

			<div class="profile-info-value">
				<span class="editable editable-click" id="signup">{{= path}}</span>
			</div>
		</div>

		<div class="profile-info-row">
			<div class="profile-info-name">备注</div>

			<div class="profile-info-value">
				<span class="editable editable-click" id="about">{{= remark}}</span>
			</div>
		</div>
	</div>
   </script>

	<!-- JS模板 -->
	<script id="tmpl-subOrgs" type="text/x-jquery-tmpl">
		{{each(i,org) subOrgs}}
			<tr>
				<td>{{= org.id}}</td>
				<td><a href="#">{{= org.name}}</a></td>
				<td>
					    {{if org.org_type == 1}}
							总公司
						{{else org.org_type == 2}}
							分公司
						{{else org.org_type == 3}}
							部门
						{{else org.org_type == 4}}
							小组
						{{else}}
							其他
						{{/if}}
				</td>
				<td>
						<span class="badge badge-warning">{{= org.priority}}</span>
				</td>
				<td>
					{{if org.available}}
						<span class="label label-sm label-success">可用</span>
					{{else}}
						<span class="label label-sm label-danger">不可用</span>
					{{/if}}
				</td>
				<td>
					<div class="hidden-sm hidden-xs btn-group">
						{{if org.priority == 1}}
							<button class="btn btn-xs btn-success disabled" data-rel="tooltip" data-placement="top" title="上移">
								<i class="ace-icon fa fa-arrow-up bigger-120"></i>
							</button>
						{{else}}
							<button class="btn btn-xs btn-success" data-rel="tooltip" data-placement="top" title="上移" onclick="changeOrgPriority({{= org.parent_id}},'up',{{= org.priority}})">
								<i class="ace-icon fa fa-arrow-up bigger-120"></i>
							</button>
						{{/if}}

						{{if org.priority == subOrgs.length}}
							<button class="btn btn-xs btn-info disabled" data-rel="tooltip" data-placement="top" title="下移">
								<i class="ace-icon fa fa-arrow-down bigger-120"></i>
							</button>
						{{else}}
							<button class="btn btn-xs btn-info" data-rel="tooltip" data-placement="top" title="下移" onclick="changeOrgPriority({{= org.parent_id}},'down',{{= org.priority}})">
								<i class="ace-icon fa fa-arrow-down bigger-120"></i>
							</button>
						{{/if}}

						<button class="btn btn-xs btn-warning" data-rel="tooltip" data-placement="top" title="编辑">
							<i class="ace-icon fa fa-edit bigger-120"></i>
						</button>
						
						<button class="btn btn-xs btn-danger" data-rel="tooltip" data-placement="top" title="删除" onclick="deleteOrgById({{= org.id}},{{= org.parent_id}})">
							<i class="ace-icon fa fa-trash-o bigger-120"></i>
						</button>
					</div>
				</td>
			</tr>
		{{/each}}
   </script>
	<%@ include file="/page/public/public-js.jsp"%>
	<script type="text/javascript">
		$(function() {
			initOrgTree();//初始化组织机构树
			bindResizeEvent();//绑定页面resize事件
			$('[data-rel=tooltip]').tooltip();
		});

		//根据组织机构ID，加载组织机构详细信息（包含：基本信息及子机构列表）
		function loadOrgInfoById(orgId) {
			var url = ctx + "/system/organization/loadOrganizationInfoById";
			url = addParam(url, "orgId", orgId);
			$.ajax({
				url : url,
				type : 'POST',
				dataType : 'json',
				success : function(response) {
					if (response.status == RESULT_SUCCESS) {
						if (response.data.org) {
							var $org = $("#tmpl-orgInfo").tmpl(
									response.data.org);
							$('#orgInfo').html($org);
						}
						if (response.data.subOrgs) {
							var $subOrgs = $("#tmpl-subOrgs").tmpl(
									response.data);
							$('#subOrgs').html($subOrgs);
						}
						
						$('[data-rel=tooltip]').tooltip();
					} else {
						top.bootbox.alert(response.message);
					}
				},
				error : function(response) {
					console.log(response);
				}
			});
		}

		//初始化组织机构树
		function initOrgTree() {
			var url = ctx + "/system/organization/loadOrganizationTreeData";
			$.ajax({
				url : url,
				type : 'POST',
				dataType : 'json',
				success : function(response) {
					if (response.status == RESULT_SUCCESS) {
						$('#treeview11').treeview({
							color : "#428bca",
							data : response.data.treeNodes,
							showBorder : false,
							selectedColor : "#000000",
							selectedBackColor : "orange",
							nodeIcon : 'glyphicon',
							onNodeSelected : function(event, node) {
								loadOrgInfoById(node.tags[0]);
							}
						});
						loadOrgInfoById(response.data.treeNodes[0].tags[0]);
					} else {
						top.bootbox.alert(response.message);
					}
				},
				error : function(response) {
					console.log(response);
				}
			});
		}

		//调用后台改变排序位置
		function changeOrgPriority(parentId, type, priority) {
			var url = ctx + "/system/organization/changeOrganizationPriority";
			url = addParam(url, "parentId", parentId);
			url = addParam(url, "type", type);
			url = addParam(url, "priority", priority);
			$.ajax({
				type : 'POST',
				url : url,
				dataType : "json",
				success : function(response) {
					if (response.status == RESULT_SUCCESS) {
						loadOrgInfoById(parentId);
					} else {
						top.bootbox.alert(response.message);
					}
				}
			});
		}

		//删除组织机构
		function deleteOrgById(orgId,parentId) {
			top.bootbox.confirm("确定要删除?", function(result) {
				if(result){
					var url = ctx + "/system/organization/deleteOrganization";
					url = addParam(url, "orgId", orgId);
					$.ajax({
						type : 'POST',
						url : url,
						dataType : "json",
						success : function(response) {
							if (response.status == RESULT_SUCCESS) {
								loadOrgInfoById(parentId);
							} else {
								top.bootbox.alert(response.message);
							}
						}
					});
				}
			}); 
		}
	</script>
</body>
</html>